<template>
	<view class="xb-page">
		<view class="xb-page-container">
			<view class="uni-flex uni-row" style="justify-content: flex-start; align-items: center;">
				<view class="page-cls-name">{formdata.name}</view>
				<uniTag class="page-bk-tag" size="small" type="default" text="班课"></uniTag>
			</view>
			<view class="page-bzr-item">班主任: {{name}}</view>
			<view class="page-bzr-item">课 程:语文</view>
			<view class="page-bzr-item">教 室:{{formdata.roomname}}</view>
			<view class="page-bzr-item">上 限:{{formdata.maxstus}}人</view>
			<view class="page-bzr-item">备 注 :{{formdata.comments}}</view>
			<view class="page-record-area">
				<view @click="addrecord" class="uni-flex uni-row page-record-cell" style="align-items: center; justify-content: space-between">
					<view>添加课节</view>
					<image class="xb-icon-button-small" src="../../../static/add.png"></image>
				</view>
				<view @click="periodrecord" class="uni-flex  uni-row page-record-cell" style="align-items: center;">
					<view>课节管理</view>
				</view>
			</view>
		</view>
		<view class="page-stu-view">
			<view class="uni-flex uni-row page-stu-area" style="justify-content: space-between;align-items: center;">
				<view>学员</view>
				<view @onclick="addstu" class="uni-flex uni-row" style="justify-content: flex-start;">
						<view class="page-add-stu">添加学员</view>
						<image class="xb-icon-button-small" src="../../../static/add.png"></image>
				</view>
			</view>
			<view class="page-stus-cell">
				<image class="page-stu-head" :src="item.headurl" v-for="(item,index) in stuList" :key="index"></image>
			</view>
		</view>

	</view>
	</view>
</template>
<script>
	import pageHead from '../../../components/page-head.vue'
	import uniTag from '../../../components/uni-tag.vue'
	 import { clsdetail } from '../../../api/getData.js';    
	  import {
         mapActions,
         mapState,
         mapGetters
    } from ‘vuex’
	export default {
		components: {
			pageHead,
			uniTag,
		},
		 computed: {
              ...mapGetters([''])
         },
		data() {
			return {
				stuList: [{
						'headurl': '../../../static/head.png'
					}, {
						'headurl': '../../../static/head.png'
					}, {
						'headurl': '../../../static/head.png'
					},
					{
						'headurl': '../../../static/head.png'
					},
					{
						'headurl': '../../../static/head.png'
					}
				],
			}
		},
		methods: {
		  ...mapMutations(['']),
            ...mapActions(['']),
			addstu:function(){

			},
			initdetail: async function(){
			  const res=await clsdetail(formdata);
			  	if(res.success==true){
			  		formdata=res.data.values;
			  	}else {

			  	}

			},
			addrecord:function(){
			   uni.navigateTo({url:'addperiodrecord'});
			}
			periodrecord:function(){
				uni.navigateTo({url:'periodrecordlist'});
			}
		}

	}
</script>

<style scoped>
	@import "../../../common/uni.css";
	@import "../../../common/xb.css";

	.page-add-stu {
		margin-right: 20px;
		color: #929292;
	}
	.page-stu-area {
		padding-top: 20px;
		background-color: #FFFFFF;
	}

	.page-cls-name {
		color: #000000;
		font-size: 35px; 
		font-weight: bold;

	}
	.page-stu-view {
		background-color: #FFFFFF;
		padding-bottom: 20px;
	}
	.page-record-area {
		width: 100%;
	}
	.page-bzr-item {
		font-weight: 300;
		letter-spacing: 2px;
	}

	.page-record-cell {
		margin-top: 10px;
		height: 80px;
		width: 100%;
		background-color: #FFFFFF;
	}

	.page-stus-head {
		background-color: #FFFFFF;
	}

	.page-bk-tag {}

	.page-stu-head {
		margin-left: 20px;
		width: 80px;
		height: 80px;
	}

	.page-stus-cell {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 20px;
	}
</style>
